<script>
    import MyItem from './MyItem.vue';
    import {nanoid} from 'nanoid';

    export default {
        name:"MyLister",
        components:{MyItem},
        data(){
            return {
                todos:[
                    {id:'0001',name:'洗衣服',done:true},
                    {id:'0002',name:'买洗衣液',done:false},
                    {id:'0003',name:'洗杯子',done:true},
                    {id:'0004',name:'买洗洁精',done:false},
                ]
            }
        },
        mounted(){
            //读取本地值
            this.readLoalStorage();
            //监听添加事件
            this.$bus.on('addTodo',this.addTodo);
            this.$bus.on('delById',this.delById);
            this.$bus.on('delByDone',this.delByDone);
            // 全选
            this.$bus.on('done',this.doneAll)

        },
        methods:{
            doneAll(done){
                this.todos.forEach(e=>{
                    e.done = done;
                })
            }
            ,
            //添加
            addTodo(name){
                console.log("收到事件");
                if(name.trim().length == 0){
                    return alert('不可添加空待办！')
                }
                console.log("类型",this.todos);
                this.todos.unshift({
                    id:nanoid(),
                    name:name,
                    done:false
                })
            },
            //删除事件
            delById(id){
                this.todos = this.todos.filter(e=>e.id !== id);
            },
            //删除已读
            delByDone(){
                //发送销毁预告
                this.todos.filter(e=>{
                    if(e.done){
                        this.$bus.emit(`bye${e.id}`,e);
                    }
                });
                //销毁
                setTimeout(()=>{
                    this.todos = this.todos.filter(e=>!e.done);
                },1000)
            },
            //保存到本地
            putLocalStorage(){
                localStorage.setItem('todos',JSON.stringify(this.todos));
            },
            //从本地读取
            readLoalStorage(){
                let s = JSON.parse(localStorage.getItem('todos'));
                if(!s){
                    s = []
                }
                this.todos = s;
            }
        },
        watch:{
            todos:{
                deep:true,
                handler(newVal){
                    console.log("todos被修改了");
                    this.putLocalStorage();
                    // this.todos = newVal;
                    this.$bus.emit('Todos',newVal);

                }
            }
        }
    }
</script>
<template>
    <div id="ListKj">
        <MyItem v-for="(e,i) in todos" :key="e.id" :todo="e" />
    </div>
</template>
<style scoped>
    #ListKj{
        height: 50vh;
        max-height: 500px;
        overflow: auto;
        overflow-x: hidden;
    }
    /* 整体滑动条样式 */
    #ListKj::-webkit-scrollbar{
        width: 5px;
        border: 1px solid black;
        background-color: gray;
        border-radius: 10px;
    }
    /* 滑块样式 */
    #ListKj::-webkit-scrollbar-thumb{
        background-color: rgba(0, 0, 0, 0.575);
        border-radius: 10px;
    }

</style>